<template>
  <div>
    <div class="tobBox">
      <h2>{{ woke }}{{ time }}</h2>
    </div>
    <div>
      <el-row :gutter="20" style="margin:0">
        <el-col :span="6"> 
          <div class="smellBox">
            <div class="colBox">
              <div class="elBox" style="background-color: rgb(41,132,248);"><el-icon color="#FFFFFF" :size="25"><Document /></el-icon></div>
            </div>
            <div>
              <span>居民总数量</span>
              <h1 style="color:rgb(41,132,248)">{{totalnumber.resnumTotal}}</h1>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="smellBox">
            <div class="colBox">
              <div class="elBox" style="background-color: rgb(40,208,148);"><el-icon color="#FFFFFF" :size="25"><HomeFilled /></el-icon></div>
            </div>
            <div>
              <span>签约居民数量</span>
              <h1 style="color:rgb(40,208,148)">{{totalnumber.sernumTotal}}</h1>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="smellBox">
            <div class="colBox">
              <div class="elBox" style="background-color: rgb(255,199,28);"><el-icon color="#FFFFFF" :size="25"><Document /></el-icon></div>
            </div>
            <div>
              <span>待处理服务量</span>
              <h1 style="color:rgb(255,199,28)">{{totalnumber.signumTotal}}</h1>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="smellBox">
            <div class="colBox">
              <div class="elBox" style="background-color: rgb(255,98,98);"><el-icon color="#FFFFFF" :size="25"><Document /></el-icon></div>
            </div>
            <div>
              <span>已完成服务量</span>
              <h1 style="color:rgb(255,98,98)">0</h1>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <Bodywork/>
  </div>
</template>
  
  <script lang="ts">
  
import { defineComponent, ref,computed } from "vue";
import { useStore } from "vuex";
import Bodywork from '@/components/Addwork/Bodywork.vue';
export default defineComponent({
  name: "Worktabe",
  components: {
    Bodywork
  },
  setup() {
    const store=useStore()
    store.dispatch('getSothedata')
   let totalnumber= computed(()=>{
      return store.state.totalnumber
    })
    // console.log(totalnumber)
    let time = ref("好！Daisy");
    let woke: string = dateState();
    // console.log(store)
    function dateState() {
      let date = new Date();
      if (date.getHours() >= 6 && date.getHours() < 12) {
        return "上午";
      } else if (date.getHours() >= 12 && date.getHours() < 18) {
        return "下午";
      } else {
        return "晚上";
      }
    }

    return { time, woke,store,totalnumber};
  },
});
</script>
  <style lang="less" scoped>
.tobBox {
  display: flex;
  font-family: "宋体";
}
.smellBox{
  display: flex;
  height: 121px;
  // width: 265px;
  // border: 1px solid red;
  border-radius: 15px;
  // margin-left: 15%;
  box-shadow: 10px 10px 5px rgb(242,245,246);
  align-items: center;
  justify-content: space-around;
  .colBox{
   .elBox{
    text-align: center;
    width:55px;
    height: 55px;
    line-height: 65px;
    border-radius: 50px;
  } 
  }
  span{
    color: #999999;
    font-size:13px;
  }
  
}
</style>